<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="font_2136029_5rpm4qa5g0d/iconfont.css">
        <title>字体图标的使用</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body,html{
                height: 100%;
                background: black;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            div{
                width: 186px;
                height: 238px;
                background: white;
                overflow: hidden;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                box-shadow: 0 0 10px 5px antiquewhite;
            }
            div span{
                font-size: 11px;
                height: 11px;
                line-height: 11px;
            }
            div span:nth-of-type(5){
                color: #8f6868;
            }
            p{
                width: 38px;
                height: 44px;
                text-align: center;
                margin: 8px 12px;
            }
            p::before{
                font-size: 25px;
            }
            P:nth-of-type(1)::before{color: #5aaae5;}
            P:nth-of-type(2)::before{color: #f2a63b;}
            P:nth-of-type(3)::before{color: #42d7c7;}
            P:nth-of-type(4)::before{color: #f2a53a;}
            P:nth-of-type(5)::before{color: #8f6868;}
            P:nth-of-type(6)::before{color: #ef877f;}
            P:nth-of-type(7)::before{color: #47d8c8;}
            P:nth-of-type(8)::before{color: #5cabe5;}
            P:nth-of-type(9)::before{color: #eb6b62;}
            P:nth-of-type(10)::before{color: #ec6f66;}
            P:nth-of-type(11)::before{color: #5cabe5;}
            p:nth-of-type(12)::before{color: #5cabe5}
        </style>
    </head>
    <body>
        <div>
            <p class="iconfont icon-huafei"><br><span>话费</span></p>
            <p class="iconfont icon-jipiao"><br><span>机票</span></p>
            <p class="iconfont icon-tubiaov-daochushangchuan-"><br><span>酒店</span></p>
            <p class="iconfont icon-icon-test"><br><span>游戏</span></p>
            <p class="iconfont icon-jiayouqia"><br><span>加油卡</span></p>
            <p class="iconfont icon-huochepiao"><br><span>火车票</span></p>
            <p class="iconfont icon-woyaozhongchou"><br><span>众筹</span></p>
            <p class="iconfont icon-licai"><br><span>理财</span></p>
            <p class="iconfont icon-baitiaoshanfu"><br><span>白条</span></p>
            <p class="iconfont icon-dianyingpiao"><br><span>电影票</span></p>
            <p class="iconfont icon-RMB"><br><span>人民币</span></p>
            <p class="iconfont icon-zhifubao"><br><span>支付宝</span></p>
        </div>
    </body>
</html>